var footers = ['<footer class="blog-footer zdy-footer">',
    '<p>毛梦伟 <a href="#">毕业设计</a>.</p>',
    '<p><a href="javascript:void(0)">2019</a></p>',
    '</footer>'];

Vue.component('zdy-footer', {
    data: function () {
        return {}
    },
    template: footers.join('')
})

var navs = ['<nav class="navbar navbar-inverse navbar-fixed-top">',
    '<div class="container">',
    '<div class="navbar-header">',
    '<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">',
    '<span class="sr-only">Toggle navigation</span>',
    '<span class="icon-bar"></span>',
    '<span class="icon-bar"></span>',
    '<span class="icon-bar"></span>',
    '</button>',
    '<a class="navbar-brand" href="#">{{title}}</a>',
    '</div>',
    '<div id="navbar" class="navbar-collapse collapse">',
    '<ul class="nav navbar-nav">',
    '<li v-for="item in navList" :class="item.value"><a v-bind:href="item.path" >{{item.text}}</a></li>',
    '</ul>',
    '<ul class="nav navbar-nav navbar-right">',
    '<li v-if="show" ><a href="./signin.html">登录</a></li>',
    '<li v-if="show"><a href="./login.html">注册</a></li>',
    '<li class="dropdown" v-if="!show" >',
    '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"',
    'aria-haspopup="true" aria-expanded="false">{{userInfo.account}} <span class="caret"></span></a>',
    '<ul class="dropdown-menu">',
    '<li v-if="type" ><a href="./user.html">个人中心</a></li>',
    '<li><a href="javascript:void(0)" @click="handleOnClickDesctroy">注销账户</a></li>',
    '<li><a href="javascript:void(0)" @click="handleOnClickLogout">退出</a></li>',
    '</ul>',
    '</li>',
    '</ul>',
    '</div>',
    '<!--/.nav-collapse -->',
    '</div>',
    '</nav>']

Vue.component('zdy-nav', {
    name: 'zdy-nav',
    props: {
        title: String,
        navList: Array,
        value: String
    },
    data: function () {
        return {
            show: true,
            userInfo: {}
        }
    },
    created() {
        var user = getSession('user');
        !!user && (this.show = false);
        this.userInfo = user;
        this.type = getSession('type') == 0;
    },
    methods: {
        handleOnClickDesctroy: function () {
            var self = this;
            var c = confirm('注销后 您的全部信息都没有 您确定注销吗？')
            if (c) {
                var param = {
                    account: this.userInfo.account,
                    type: getSession('type')
                }
                xhr.send('/pub/iface/job/logout', param, function (res) {
                    self.handleOnClickLogout();
                })
            }
        },
        handleOnClickLogout: function () {
            window.sessionStorage.removeItem('user');
            window.sessionStorage.removeItem('type');
            window.location.reload();
        }
    },
    template: navs.join('')
})

var pages = ['<nav>',
    '<ul class="pager">',
    '<li class="previous" :class="disabled" ><a href="javascript:void(0)" @click="handleOnClickPrev">Previous</a></li>',
    '<li  class="next" :class="nextDisabled"><a href="javascript:void(0)" @click="handleOnClickNext" >Next</a></li>',
    '</ul>',
    '</nav>']

Vue.component('zdy-page', {
    name: 'zdy-page',
    props: {
        total: [String, Number]
    },
    data: function () {
        return {
            curr: 1
        }
    },
    computed: {
        disabled() {
            if (this.total == 1 || this.curr == 1) return 'disabled';
        },
        nextDisabled() {
            if (this.total == 1 || this.curr == this.total) return 'disabled';
        }
    },
    methods: {
        handleOnClickPrev: function () {
            if (this.curr == 1) return;
            --this.curr;
            var num = (this.curr - 1) * 10;
            this.$emit('num', num);
        },
        handleOnClickNext: function () {
            if (this.curr == this.total) return;
            ++this.curr;
            var num = (this.curr - 1) * 10;
            this.$emit('num', num);
        }
    },
    template: pages.join('')
})